<template>
  <div class="home">
    <div>
      <el-row>
        <el-col :span="6" :offset="1">
          <el-card>
            <div class="layout-title">学习教程</div>
            <div class="address-content">
              <a style="color: #409eff; text-decoration: none" href="https://www.macrozheng.com" target="_blank">mall学习教程</a>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6" :offset="1">
          <el-card>
            <div class="layout-title">视频教程</div>
            <div class="address-content">
              <a style="color: #409eff; text-decoration: none" href="https://www.macrozheng.com/mall/catalog/mall_video.html" target="_blank">mall视频教程（2023）</a>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6" :offset="1">
          <el-card>
            <div class="layout-title">点Star支持项目</div>
            <div class="address-content">
              <a style="color: #409eff; text-decoration: none" href="https://github.com/macrozheng/mall" target="_blank">mall项目</a>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div style="padding-top: 20px">
      <el-row>
        <el-col :span="6" :offset="1">
          <el-card>
            <div class="total-frame">
              <img
                src=""
                class="total-icon"
              />
              <div class="total-title">今日订单总数</div>
              <div class="total-value">200</div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6" :offset="1">
          <el-card>
            <div class="total-frame">
              <img
                src=""
                class="total-icon"
              />
              <div class="total-title">今日销售总额</div>
              <div class="total-value">￥5000.00</div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6" :offset="1">
          <el-card>
            <div class="total-frame">
              <img
                src=""
                class="total-icon"
              />
              <div class="total-title">昨日销售总额</div>
              <div class="total-value">￥5000.00</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div style="padding-top: 20px">
      <el-row>
        <el-col :span="20" :offset="1">
          <div class="layout-title">待处理事务</div>
          <el-table :data="tableData" :stripe="true" :border="true" :highlight-current-row="true">
            <el-table-column prop="type" label="类别" />
            <el-table-column prop="num" label="数量" style="color: red" />
          </el-table>
        </el-col>
      </el-row>
    </div>

    <div style="padding-top: 20px">
      <el-row>
        <el-col :span="10" :offset="1">
          <el-card>
            <div class="layout-title">商品总览</div>
            <div style="padding: 40px">
              <div style="color: red; font-size: 24px">
                <el-row>
                  <el-col :span="4" :offset="2">100</el-col>
                  <el-col :span="4" :offset="2">400</el-col>
                  <el-col :span="4" :offset="2">50</el-col>
                  <el-col :span="4" :offset="2">500</el-col>
                </el-row>
              </div>
              <div style="padding-top: 10px; font-size: 16px">
                <el-row>
                  <el-col :span="4" :offset="2">已下架</el-col>
                  <el-col :span="4" :offset="2">已上架</el-col>
                  <el-col :span="4" :offset="2">库存紧张</el-col>
                  <el-col :span="4" :offset="2">全部商品</el-col>
                </el-row>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="10">
          <el-card>
            <div class="layout-title">用户总览</div>
            <div style="padding: 40px">
              <div style="color: red; font-size: 24px">
                <el-row>
                  <el-col :span="4" :offset="2">100</el-col>
                  <el-col :span="4" :offset="2">200</el-col>
                  <el-col :span="4" :offset="2">1000</el-col>
                  <el-col :span="4" :offset="2">2000</el-col>
                </el-row>
              </div>
              <div style="padding-top: 10px; font-size: 16px">
                <el-row>
                  <el-col :span="4" :offset="2">今日新增</el-col>
                  <el-col :span="4" :offset="2">昨日新增</el-col>
                  <el-col :span="4" :offset="2">本月新增</el-col>
                  <el-col :span="4" :offset="2">会员总数</el-col>
                </el-row>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
const tableData = [
  {
    type: '待付款订单',
    num: '（10）'
  },
  {
    type: '已完成订单',
    num: '（10）'
  },
  {
    type: '待确认收货订单',
    num: '（10）'
  },
  {
    type: '待发货订单',
    num: '（10）'
  },
  {
    type: '新缺货登记',
    num: '（10）'
  },
  {
    type: '待处理退款申请',
    num: '（10）'
  },
  {
    type: '已发货订单',
    num: '（10）'
  },
  {
    type: '待处理退货订单',
    num: '（10）'
  },
  {
    type: '广告位即将到期',
    num: '（10）'
  }
]
</script>

<style scoped>
.home {
  padding-left: 10px;
  padding-right: 10px;
}

.layout-title {
  color: #606266;
  padding: 15px 20px;
  background: #f2f6fc;
  font-weight: 700;
}

.address-content {
  padding: 20px;
  font-size: 18px;
  background-color: transparent;
}

.total-frame {
  border: 1px solid #409eff;
  padding: 20px;
  height: 100px;
}

.total-title {
  position: relative;
  font-size: 16px;
  color: #909399;
  left: 70px;
  top: -50px;
}

.total-value {
  position: relative;
  font-size: 18px;
  color: #606266;
  left: 70px;
  top: -40px;
}

.total-icon {
  color: #409eff;
  width: 60px;
  height: 60px;
}
</style>
